<!-- 顶部操作栏相关组件 -->
<template>
  <div class="box-top flex-center st">
    <div class="header-left flex-center header-bg">
      <div class="cur-page">
        {{
          titleComputed
        }}
      </div>
      <ul
        v-if="showModeList"
        class="column-config"
      >
        <li
          v-for="item in column"
          :key="item.key"
          :class="{'active': item.key === curMode}"
          @click="modeChange(item)"
        >
          {{
            item.label
          }}
        </li>
      </ul>
    </div>
    <div class="header-right flex-center st header-bg">
      <div class="preview-control flex-center">
        <div class="lyNova-cutter-zoom">
          <i
            class="el-icon_narrow"
            @click="emitControl('scaleControl', -1)"
          />
          <span>{{ scale + "%" }}</span>
          <i
            class="el-icon_amplification"
            @click="emitControl('scaleControl', 1)"
          />
          <i
            class="el-icon_adapt"
            @click="emitControl('scaleControl', 0)"
          />
          <template v-if="realShowClip">
            <el-popover
              width="500"
              trigger="click"
            >
              <div class="clip-desc">
                <p>截图-快捷键</p>
                <p
                  v-for="item in desc"
                  :key="item"
                >
                  {{ item }}
                </p>
              </div>
              <i
                slot="reference"
                class="el-icon-_annotation"
              />
            </el-popover>
          </template>
        </div>
      </div>
      <PageAi
        v-model="curPage"
        :pages="pages"
        class="pageAi"
      />
      <i
        v-if="realShowClip"
        class="el-icon-_shear_nor" 
        @click="emitControl('clipPhoto', 0)"
      />
    </div>
  </div>
</template>
<script>
import PageAi from './page.vue';
export default {
  components: {
    PageAi,
  },
  props: {
    /**
     * 当前分栏模式
     */
    mode: {
      type: String,
      default: '',
    },
    /**
     * 分栏列表（只有第一栏才会显示顶部分栏数据）
     */
    column: {
      type: Array,
      default: () => {
        return [];
      },
    },
    /**
     * 当前图片缩放比例
     */
    scale: {
      type: Number,
      default: 100,
    },
    /**
     * 是否展示截图
     */
    showClip: {
      type: Boolean,
      default: false,
    },
    /**
     * 图片数量
     */
    pages: {
      type: Number,
      default: 0,
    },
    signal: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      desc: [ // 截图描述
        '① 截图：alt + w',
        '② 关闭截图：ctrl + q',
        '③ 保存截图：ctrl+s 或 鼠标左键单击画板空白区域',
        '④ 撤销截图：ctrl+z',
      ],
      curPage: 1, // 当前页码
      curMode: this.mode,
    };
  },
  computed: {
    /**
     * 是否展示 教辅教材列表
     */
    showColumnList() {
      // 只有一列的话，如果不传或者传入 render 为true，则渲染此 列表，设置为 false 则不渲染
      if (this.column.length === 1) {
        return this.column[0]?.render ?? true;
      }
      return this.column.length > 1 && this.showModeList;
    },
    /**
     * 是否展示 模式列表
     */
    showModeList() {
      const globalKey = this.column.find(item => item.global)?.key ?? '';
      const curShow = this.signal.split('-')[1];
      if (globalKey === this.curMode) return curShow === '0';
      return true;
    },
    titleComputed() {
      return this.column.find(item => item.key === this.signal.split('-')[0]).label ?? '';
    },
    // 将当前分栏数据中的页码返回出来
    pageNo() {
      const outerPageNo = this.column.find(item => item.key === this.signal.split('-')[0])?.pageNo ?? 1;
      return outerPageNo;
    },
    realShowClip() {
      return this.showClip;
    }
  },
  watch: {
    mode(val) {
      this.curMode = val;
    },
    /**
     * 监听外部传入的当前分栏的页码更改
     */
    pageNo: {
      handler(val) {
        if (val > 0) {
          // 当图片总页码 小于 传入进来的页码时，将页码置为 1
          if (val > this.pages) {
            this.curPage = 1;
          // 正常切换页码
          } else {
            this.curPage = val;
          }
        }
        // 除此之外的空页码/空值 都默认不操作
      },
      immediate: true,
    },
    /**
     * 监听内部页码更改
     * @param {*} val 
     */
    curPage(val) {
      if (val > 0 && val <= this.pages) {
        this.$parent.updateImage();
      }
    },
  },
  methods: {
    /**
     * 方法调用语法槽
     * 每个方法具体描述在调用处有介绍
     * @param {*} emitName
     * @param {*} emitArg
     */
    emitControl(emitName, emitArg) {
      this.$emit('emitSetter', {
        type: emitName,
        value: emitArg,
      });
    },
    /**
     * 分栏模式切换
     * @param {*} tab 分栏
     */
    modeChange(tab) {
      if (this.curMode === tab.key) return;
      this.emitControl('modeChange', tab.key);
    }
  },
};
</script>
<style lang="scss" scoped>
.box-top {
  padding: 5px 10px;
  box-sizing: border-box;
  background-color: #555555;
  z-index: 5;
  height: 32px;
  white-space: nowrap;
  .header-left {
    flex: 2 2 40%;
    .dropdown {
      color: #fff;
      margin-right: 10px;
    }
    .column-config {
      margin-left: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      li {
        border: 1px solid #fff;
        border-radius: 6px;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 0 5px;
        line-height: 18px;
        font-size: 12px;
        cursor: pointer;
        &.active {
          border-color: #ffae0d;
          color: #ffae0d;
        }
      }
    }
  }
  .header-right {
    flex: 3 3 60%;
    .preview-control {
      margin-right: 30px;
      .lyNova-cutter-zoom {
        display: flex;
        align-items: center;
        flex-flow: row nowrap;
        i {
          font-size: 18px;
          cursor: pointer;
          color: #ffae0d;
          margin: 0 5px;
        }
      }
      ::v-deep .el-button {
        margin-left: 10px;
      }
      ::v-deep .el-checkbox {
        color: #fff;
        margin-right: 10px;
      }
    }
    .pageAi {
      margin-right: 10px;
    }
  }
}
.flex-center {
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  &.st {
    justify-content: space-between;
  }
}

.header-bg {
  background-color: #555555;
}

.el-icon_adapt {
  width: 22px;
  height: 22px;
  background: url("../images/icon_adapt_nor.png") 3px bottom no-repeat;
  background-size: 20px;
  &:hover {
    background: url("../images/icon_adapt_pre.png") 3px bottom no-repeat;
    background-size: 20px;
  }
}
.el-icon_narrow {
  width: 20px;
  height: 20px;
  background: url("../images/icon_narrow_nor.png") 3px bottom no-repeat;
  background-size: 18px;
  &:hover {
    background: url("../images/icon_narrow_pre.png") 3px bottom no-repeat;
    background-size: 18px;
  }
}
.el-icon_amplification {
  width: 20px;
  height: 20px;
  background: url("../images/icon_amplification_nor.png") 3px bottom no-repeat;
  background-size: 18px;
  &:hover {
    background: url("../images/icon_amplification_pre.png") 3px bottom no-repeat;
    background-size: 18px;
  }
}
.el-icon-_shear_nor {
  width: 22px;
  height: 22px;
  background: url("../images/icon_shear_nor.png") 3px bottom no-repeat;
  background-size: 22px;
  cursor: pointer;
  &:hover {
    background: url("../images/icon_shear_pre.png") 3px bottom no-repeat;
    background-size: 22px;
  }
}
.el-icon-_annotation {
  width: 22px;
  height: 22px;
  background: url("../images/icon_annotation.png") 3px bottom no-repeat;
  background-size: 18px;
  &:hover {
    background: url("../images/icon_annotation_pre.png") 3px bottom no-repeat;
    background-size: 18px;
  }
}
</style>
<style lang="scss">
.clip-desc {
  padding: 0 5px;
  p {
    line-height: 25px;
    &:first-child {
      border-bottom: 1px solid #e9e9eb;
      height: 30px;
      line-height: 30px;
    }
  }
}
</style>
